<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="750px"
      :title="tabIndex==0?'文本消息':'图文素材'"
      :close-on-click-modal="false"
      ref="dialog__material"
    >
      <el-tabs @tab-click="handleClick" value="0">
        <el-tab-pane label="文本消息" name="0">
          <br />
          <el-form :model="textMessage" :rules="rules">
            <el-form-item prop="text">
              <el-input
                type="textarea"
                autofocus
                :autosize="{ minRows: 3, maxRows: 15}"
                maxlength="300"
                v-model="textMessage.text"
                placeholder="请输入文本消息内容"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <p class="textR">
            还可以输入
            <strong>{{textMessageLength}}</strong>字，按下Enter键换行
          </p>
        </el-tab-pane>
        <el-tab-pane label="图文素材" name="1">
          <div v-if="list.length!==0">
            <el-row :gutter="16">
              <el-col :span="8" v-for="(item, index) in list" :key="index">
                <div @click="chooseMaterial(index,item.id)">
                  <el-card :body-style="{ padding: '0px' }" shadow="always">
                    <img
                      :src="item.picUrl"
                      onerror="this.src='../../../../static/img/default.jpg'"
                      class="image"
                    />
                    <div class="bottom">
                      <div class="title">{{item.title}}</div>
                      <svg-icon :icon-class="item.id==materialID?'s-i-tick-active':'s-i-tick'" />
                    </div>
                  </el-card>
                </div>
              </el-col>
            </el-row>
            <!-- 分页 -->
            <pagination-direction
              v-if="paginationConfig.total!==0"
              :config="paginationConfig"
              @sizeschange="sizesChange"
              @pagechange="pageChange"
            ></pagination-direction>
          </div>

          <div v-else class="nothing">暂无素材</div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hide()">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { setKeyByMaterial, getMaterialList } from "@/api/wechat.js";
  export default {
    data() {
      return {
        /**
         * 表单校验字段相关
         */
        rules: {
          text: [
            {
              required: true,
              message: "请输入文本消息内容",
              trigger: ["blur", "change"]
            }
          ]
        },
        // 配置
        //分页配置
        paginationConfig: {
          direction: "center", // 分页位置
          layout: "total, sizes, prev, pager, next, jumper", // 分页类型
          pageSizes: [9, 18], // 分页pages
          total: 0,
          page: 1, // 页数-默认1
          pageSize: 9 // 每页条数-默认10
        },
        resolve: null,
        reject: null,
        // 状态
        dialogVisible: false, // 素材弹框
        tabIndex: 0, // tab栏索引
        // 数据
        textMessage: {
          text: "" // 获取用户输入的文本消息
        },
        materialID: "", // 获取用户选择的素材ID
        list: []
      };
    },
    computed: {
      //文本消息输入提示
      textMessageLength: function() {
        return 300 - this.textMessage.text.length;
      }
    },
    mounted() {},
    methods: {
      /**
       * 获取数据
       */
      // 获取素材数据
      initData(
        page = this.paginationConfig.page,
        pageSize = this.paginationConfig.pageSize
      ) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        getMaterialList(params)
          .then(res => {
            this.list = res.data.list;
            this.paginationConfig.total = res.data.total;
            this.paginationConfig.page = res.data.pageNum;
          })
          .catch(err => {});
      },

      // 分页sizes改变
      sizesChange() {
        this.initData();
      },

      // 分页page改变
      pageChange() {
        this.initData();
      },

      //  初始化值
      defaultData() {
        this.textMessage.text = "";
        this.materialID = "";
        this.paginationConfig.page = 1;
        this.paginationConfig.pageSize = 9;
      },

      open() {
        this.defaultData();
        this.show();
        return new Promise((resolve, reject) => {
          this.resolve = resolve;
          this.reject = reject;
        });
      },

      show() {
        this.dialogVisible = true;
      },

      hide() {
        this.resolve = null;
        this.reject = null;
        this.dialogVisible = false;
      },

      /**
       * 按钮组
       */
      // 切换素材tab栏
      handleClick(tab, event) {
        this.tabIndex = tab.index;
        if (this.tabIndex == 1) {
          this.initData();
        }
      },

      // 获取选中的图文素材id
      chooseMaterial(index, id) {
        this.materialID = id;
      },

      // 确认选择素材
      onSubmit() {
        if (this.tabIndex == 0 && this.textMessage.text != "") {
          let params = {
            type: "text",
            value: this.textMessage.text
          };
          this.keyByMaterial(params);
        } else if (this.tabIndex == 1 && this.materialID != "") {
          let params = {
            type: "article",
            value: this.materialID
          };
          this.keyByMaterial(params);
        } else {
          this.hide();
        }
      },

      // 映射请求
      keyByMaterial(params) {
        setKeyByMaterial(params).then(res => {
          this.$message({
            type: "success",
            message: "成功!"
          });
          this.resolve && this.resolve(res.data);
          this.hide();
        });
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  // 弹框
  .el-tabs__content {
    .el-row {
      margin-top: 10px;
      .el-col {
        margin-bottom: 16px;
        .image {
          display: block;
          width: 100%;
          height: 125px;
        }
        .bottom {
          position: relative;
          .title {
            padding: 10px 30px 10px 10px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          svg {
            position: absolute;
            right: 5px;
            top: 50%;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
  .nothing {
    height: 100px;
    line-height: 100px;
    color: #8d8d8d;
    text-align: center;
  }
</style>